<template>
  <div class="setting">
    <div class="slideshow">
      <title-vue>推广图配置</title-vue>
      <ul>
        <li v-for="(item,index) in slide" :key="item.imageid">
          <p class="title">推广{{index + 1}}</p>
          <label>
            <span>标题：</span>
            <input type="text" v-model="item.title">
          </label>
          <label>
            <span>图片链接：</span>
            <input type="text" v-model="item.url">
          </label>
          <label>
            <span>图片：</span>
            <div class="img">
              <img v-layz :src="item.src" :alt="item.title">
              <input @change="preview($event)" style="display:none" :id="'file' + item.imageid" type="file" :ref="'image' + item.imageid">
              <button @click="uploading(item.imageid)">上传图片</button>
              <button @click="updataSlides(item.imageid,index)">保存</button>
            </div>
          </label>
        </li>
      </ul>
    </div>
    <div class="zixun">
      <title-vue class="btn">
        <span>资讯配置</span>
        <button class="add" @click="isAdd = true">add</button>
      </title-vue>
      <ul>
        <transition-group name="left_fade">
          <li v-for="(item,index) in zixun" :key="item.messageid">
            <div class="head">
              <p class="title">资讯{{index + 1}}</p>
              <button @click="removeMessage(item.messageid,index)">删除</button>
            </div>
            <p><span>标题：</span><span>{{item.title}}</span></p>
            <p><span>地址：</span>
              <a :href="item.url" target="_blank">{{item.url}}</a>
            </p>
          </li>
        </transition-group>
      </ul>
      <transition name="fade">
        <div class="addzixun" v-drag v-if="isAdd">
          <div class="title">
            <span>添加资讯</span>
            <off-btn @off="isAdd = false"></off-btn>
          </div>
          <div class="box" @mousedown.stop="">
            <label>
              <span>标题：</span>
              <input type="text" v-model="message.title">
            </label>
            <label>
              <span>地址：</span>
              <input type="text" v-model="message.url">
            </label>
            <button class="add" @click="addzixun">添加</button>
          </div>
        </div>
      </transition>
    </div>
    <div class="advertising">
      <title-vue class="btn">
        <span>活动推广</span>
        <button>add</button>
      </title-vue>
      <ul>
        <li><p class="title">活动...</p></li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import offBtn from "../../../info/offBtn.vue"
import titleVue from "../title.vue"
export default {
  name: 'Setting',

  data() {
    return {
      // 轮播图数据
      slide: [
        {title:'',imgSrc:'',url:''},
        {title:'',imgSrc:'',url:''},
        {title:'',imgSrc:'',url:''},
        {title:'',imgSrc:'',url:''},
        {title:'',imgSrc:'',url:''}
      ],
      zixun: [], // 资讯数据
      isAdd: false, // 打开添加资讯弹窗
      message: { // 添加资讯数据
        title: '',
        url: ''
      }
    };
  },

  watch:{
    isAdd(){
      this.message = {title:'',url:''}
    }
  },

  mounted(){
    // 初始化
    this.$api.getHomeData().then(res => {
      this.zixun = res.message
      this.slide = res.slides
    })
  },

  methods: {
    // 添加资讯
    addzixun(){
      if(this.message.title.trim() && this.message.url.trim()){
        this.$api.addMessage(this.message).then(res => {
          if(res instanceof Object){
            this.zixun.unshift(res)
            this.isAdd = false
            this.showHint({title:'添加成功',isFlag: true})
          }
        })
      }else{
        this.showHint({title:'标题和地址不能为空!',isFlag: false})
      }
      
    },
    // 删除资讯
    removeMessage(id,index){
      this.$api.removeMessage({id}).then(res => {
        if(res == 1){
          this.showHint({title: '删除成功',isFlag:true})
          this.zixun.splice(index,1)
        }
      })
    },
    // 修改推广
    updataSlides(id,index){
      let file = this.$refs['image' + id][0]
      console.log(file.value)
      this.$api.updataSlides({
        title: this.slide[index].title,
        url: this.slide[index].url,
        file: file.files[0],
        id,
      }).then(res => {
        if(res == 1){
          this.showHint({title:'保存成功',isFlag:true})
        }
      })
    },
    // 上传图片
    uploading(id){
      let file = this.$refs['image' + id][0]
      file.click()
    },
    // 上传图片发生改变
    preview(e){
      let file = e.target
      let fileName = file.value.substring(file.value.lastIndexOf('.') + 1).toLowerCase()
      if(['png','jpg','jpeg'].indexOf(fileName) != -1)
        file.previousElementSibling.src = URL.createObjectURL(file.files[0])
      else{
        this.showHint({title:'图片格式不符!',isFlag: false})
      }
    },
    ...mapActions(['showHint'])
  },

  components: {
    titleVue,offBtn
  }
};
</script>

<style scoped>
.setting{
  width: 100%;
  display: flex;
}
.slideshow,.zixun,.advertising{
  flex: 1;
  height: 500px;
  border: 1px solid gray;
  margin: 20px;
  border-radius: 5px 5px 0 0;
  min-width: 300px;
  overflow: hidden;
}
.setting ul{
  font-size: 0.8rem;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 460px;
}
.setting input{
  outline: none;
  height: 40px;
  flex: 1;
  border: 1px solid gray;
  padding-left: 4px;
  transition: all .3s ease;
}
.setting input:focus{
  border: 1px solid aqua;
  box-shadow: 0 0 2px aqua;
}
.setting li{
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #ececec;
  padding: 10px;
}
.setting li p.title{
  color: rgb(4, 245, 173);
}
.zixun li p{
  display: flex;
  margin-top: 10px;
}
.zixun p span:first-child{
  white-space: nowrap;
}
.zixun p span{
  height: 30px;
}
.zixun p a{
  text-decoration: underline;
  color: blue;
}
.setting li label{
  margin: 10px 0;
  display: flex;
  align-items: top;
}
.slideshow img{
  width: 100px;
  height: 60px;
}
.slideshow .img{
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-around;
}
.setting button{
  padding: 5px 10px;
  background-color: green;
  color: white;
  cursor: pointer;
  font-size: 0.7rem;
  opacity: .7;
  border-radius: 4px;
}
.slideshow .img button:hover{
  opacity: 1;
}
.btn{
  display: flex;
  justify-content: space-between;
  padding-right: 10px;
  align-items: center;
}
.btn button{
  height: 30px;
  opacity: 1;
  transition: all .3s ease;
  color: rgba(255, 255, 255, .7);
}
.btn button:hover{
  color: rgba(255, 255, 255, 1);
}
.addzixun{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 300px;
  background-color: white;
  border: 1px solid gray;
  box-shadow: 0 0 4px gray;
  border-radius: 10px;
  font-size: 0.8rem;
  overflow: hidden;
}
.addzixun .title{
  width: 100%;
  height: 30px;
  line-height: 30px;
  background-color: gray;
  color: white;
  display: flex;
  padding: 0 10px;
  justify-content: space-between;
}
.addzixun label{
  width: 100%;
}
.addzixun label input{
  width: 100%;
}
.addzixun .add{
  width: 200px;
  margin-top: 20px;
}
.addzixun .box{
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.head{
  display: flex;
  justify-content: space-between;
}
.head button{
  background-color: red;
  font-size: 0.6rem;
}
.head button:hover{
  opacity: 1;
}
</style>